<template>
    <div>
        <el-form-item label="app权限">
            <!--  -->
            <el-checkbox v-model="menuExpand" @change="handleCheckedTreeExpand($event, 'menu')">展开/折叠</el-checkbox>
            <el-checkbox v-model="menuNodeAll" @change="handleCheckedTreeNodeAll($event, 'menu')">全选/全不选</el-checkbox>
            <!--  -->
            <el-checkbox v-model="form.menuCheckStrictly"
                @change="handleCheckedTreeConnect($event, 'menu')">父子联动</el-checkbox>
            <!--  -->

            <el-tree class="tree-border" :data="appOptions" show-checkbox ref="menuRefAuth" node-key="appAuthorityId"
                :check-strictly="!form.menuCheckStrictly" empty-text="加载中，请稍候"
                :props="{ label: 'name', children: 'children' }"></el-tree>
            <button @click="click" v-show="false"></button>
        </el-form-item>
    </div>
</template>


<script setup>
import { listAuth } from "@/api/backAppAuthority/backAppAuthority";
import { ref, reactive, onMounted, watch } from 'vue'
const props = defineProps({
    appOptions: Array
});

const appOptions = ref(props.appOptions)

/*  */
watch(props, ((newVal) => {
    appOptions.value = newVal.appOptions
}))



const menuExpand = ref(false);
const menuNodeAll = ref(false);

const menuRefAuth = ref(null);




const deptRef = ref(null);

const showChange = ref(false)


const data = reactive({
    form: {},
    queryParams: {
        currentPage: 1,
        pageSize: 10,
        roleName: undefined,
        roleKey: undefined,
        status: undefined
    },
    rules: {
        roleName: [{ required: true, message: "角色名称不能为空", trigger: "blur" }],
        roleKey: [{ required: true, message: "权限字符不能为空", trigger: "blur" }],
        roleSort: [{ required: true, message: "角色顺序不能为空", trigger: "blur" }]
    },
});
const { queryParams, form, rules } = toRefs(data);

/** 树权限（展开/折叠）*/
function handleCheckedTreeExpand(value, type) {
    if (type == "menu") {
        let treeList = appOptions.value;
        console.log(treeList, "treeList");
        for (let i = 0; i < treeList.length; i++) {
            menuRefAuth.value.store.nodesMap[treeList[i].appAuthorityId].expanded = value;
        }
    } else if (type == "dept") {
        let treeList = deptOptions.value;
        for (let i = 0; i < treeList.length; i++) {
            deptRef.value.store.nodesMap[treeList[i].appAuthorityId].expanded = value;
        }
    }
}

/** 树权限（全选/全不选） */
function handleCheckedTreeNodeAll(value, type) {
    console.log(value, 'value');
    console.log(type, 'type');
    if (type == "menu") {
        menuRefAuth.value.setCheckedNodes(value ? appOptions.value : []);
    } else if (type == "dept") {
        deptRef.value.setCheckedNodes(value ? deptOptions.value : []);
    }
}

/** 树权限（父子联动） */
function handleCheckedTreeConnect(value, type) {
    console.log(value, 'value');
    console.log(type, 'type');

    if (type == "menu") {
        form.value.menuCheckStrictly = value ? true : false;
    } else if (type == "dept") {
        form.value.deptCheckStrictly = value ? true : false;
    }
}
/** 所有菜单节点数据 */
function getMenuAllCheckedKeys() {
    // 目前被选中的菜单节点
    let checkedKeys = menuRefAuth.value.getCheckedKeys();
    // 半选中的菜单节点
    let halfCheckedKeys = menuRefAuth.value.getHalfCheckedKeys();
    checkedKeys.unshift.apply(checkedKeys, halfCheckedKeys);
    return checkedKeys;
}

const click = () => {
    return getMenuAllCheckedKeys()
}

/** 查询菜单树结构 */
// function getMenuTreeselect() {
//     listAuth().then(response => {
//         appOptions.value = response;
//     });
// }

onMounted(() => {
    // getMenuTreeselect()
})


defineExpose({
    menuRefAuth,
    click
})


</script>
<style lang='scss' scoped></style>